<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>自定义表格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
<script src="${base}/js/plugins/layer/layer.min.js"></script>
<script>
		$(function(){
			$("#tableName").blur(function(){
				var tableName = $(this).val();
				
				if(tableName != ""){
					$.post("${ pageContext.request.contextPath }/table/checkTableName",{"tableName":tableName},function(data){
		 				if(data == 1){
		 					$("#s1").html("<font color='green'>该表格名可以使用</font>");
		 					$("#saveTable").attr("disabled",false);
		 				}else if(data == 2){
		 					$("#s1").html("<font color='red'>该表格名已经存在</font>");
		 					$("#saveTable").attr("disabled",true);
	 	 				}
	 	 			});
	 			}else{
	 				$("#s1").html("<font color='red'>表格名不能为空</font>");
	 				$("#saveTable").attr("disabled",true);
	 			}
	 		});
	 		
	 	});
			
</script>
</head>

<body>
	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>
		<form action="${ pageContext.request.contextPath }/table/createTable?projectId=${project.id}&userId=${user.id}"
			method="post">
			<div class="form-group">
				<div class="col-sm-4">
					<input type="text" class="form-control" id="tableName"
						name="tableName" placeholder="请输入表格名称">
				</div>
				<span id="s1"></span>
			</div>
			<div class="container">
				<div style="overflow-x: scroll; width: 100%; white-space: nowrap;">
					<table class="table table-condensed table table-bordered"
						style="width: 100%; table-layout: fixed; margin-top: 50px; overflow: auto"
						align="center" id="table" border="1">
						<thead>
							<tr id="tr1" style="height: 30px;">
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName1" type="text " placeholder="请输入列名"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td " style="width: 120px; height: auto;"><input
									name="colName2" type="text" placeholder="请输入列名"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName3" type="text " placeholder="请输入列名"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td " style="width: 120px; height: auto;"><input
									name="colName4" type="text" placeholder="请输入列名"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName5" type="text " placeholder="请输入列名"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td " style="width: 120px; height: auto;"><input
									name="colName6" type="text" placeholder="请输入列名"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
							</tr>
						</thead>
						<tbody>
							<tr id="tr2" style="height: 30px;">
								<td><select name="colType1"
									style="width: 100px; height: 25px;">

										<option value="0">文本框</option>
										<option value="1">下拉框</option>
								</select></td>
								<td><select name="colType2"
									style="width: 100px; height: 25px;">

										<option value="0">文本框</option>
										<option value="1">下拉框</option>
								</select></td>
								<td><select name="colType3"
									style="width: 100px; height: 25px;">

										<option value="0">文本框</option>
										<option value="1">下拉框</option>
								</select></td>
								<td><select name="colType4"
									style="width: 100px; height: 25px;">

										<option value="0">文本框</option>
										<option value="1">下拉框</option>
								</select></td>
								<td><select name="colType5"
									style="width: 100px; height: 25px;">

										<option value="0">文本框</option>
										<option value="1">下拉框</option>
								</select></td>
								<td><select name="colType6"
									style="width: 100px; height: 25px;">

										<option value="0">文本框</option>
										<option value="1">下拉框</option>
								</select></td>
							</tr>
							<tr id="tr3" style="height: 30px;">
								<td class="td" style="height: auto;"><input name="defVal1" id="defVal1"
									type="text" placeholder="默认值"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>
								<td class="td" style="height: auto;"><input name="defVal2"
									type="text" placeholder="默认值"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>
								<td class="td" style="height: auto;"><input name="defVal3"
									type="text" placeholder="默认值"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>
								<td class="td" style="height: auto;"><input name="defVal4"
									type="text" placeholder="默认值"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>
								<td class="td" style="height: auto;"><input name="defVal5"
									type="text" placeholder="默认值"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>
								<td class="td" style="height: auto;"><input name="defVal6"
									type="text" placeholder="默认值"
									style="border: 1px; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>

							</tr>
							
						</tbody>
					</table>
				</div>
				<p style="color: red;">注：如果列属性选择为下拉框，则按如下格式输入默认值： a||b||c ，以此类推</p>
				<!-- <button type="button" class="btn btn-primary"
				onclick="AddRow(document.getElementById('table'),1)">增加一行</button> -->
				<button type="button" class="btn btn-primary"
					onclick="addCell(id++)">增加一列</button>
				<input id="saveTable" type="submit" class="btn btn-primary" value="保存表格">
				
				 				 <a onclick="tiaose()"><input  type="button"
							class="btn btn-success" value="调色测试"></a>
						<input  type="text"  id="bbbb" />
			</div>
		</form>
	</div>
</body>
<script type="text/javascript">


		function tiaose(){
		    layer.open({
		      type: 2,
		      title: 'iframe父子操作',
		      maxmin: true,
		      shadeClose: true, //点击遮罩关闭层
		      area : ['800px' , '820px'],
		      content: 'http://127.0.0.1:8082/Excel/index3333.html',
		      /*  content: 'http://baidu.com' */
		    	 
		      
		    });
		  };

	  
	  
	
	function addCell(id) {
		id = id + 7;

		$("#tr1")
				.append(
						'<th style="width: 120px;height:auto; " class="td"><input name="colName'+id+'" type="text " placeholder="请输入列名" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>');

		$("#tr2")
				.append(
						'<td><select style="width: 100px;height: 25px;" name="colType'+id+'"> <option value="0">文本框</option><option value="1">下拉框</option></select></td>');
		/* 	$("#tr1")
		 .append(
		 '<td class="td"><input type="text" style="border:1px;height:46px;font-size:10px" placeholder="请输入列名"></td>');
		 */$("#tr3")
				.append(
						'<td class="td" style="height: auto;"><input name="defVal'+id+'" type="text" placeholder="默认值" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>');

	}
	function addRow() {
		var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		tbody.appendChild(tr);
		for (var i = 0; i < cells; i++) {
			var inputi = document.createElement('input');
			inputi.style.border = "none";
			inputi.style.height = "46px";
			inputi.style.font.size = "10px";
			var tdi = document.createElement('td');
			tdi.appendChild(inputi);
			tdi.className = "td";
			tdi.style.height = "46px";
			tdi.style.width = " 5%";
			tr.appendChild(tdi);
		}
	}

	$(".trr").bind("mouseover", function() {
		$(this).css("background-color", "#eeeeee");
	})
	$(".trr").bind("mouseout", function() {
		$(this).css("background-color", "#ffffff");
	})
</script>
</html>


